<template>
  <div class="home">
    <!--  标题-->
    <el-dialog
      title="活跃课程"
      :visible.sync="open"
      width="1200px"
      destroy-on-close
      @close="close"
    >
      <div>
        <!--日期选择器-->
        <div class="datePicker">
          <el-date-picker
            :clearable="false"
            v-model="startDate"
            :picker-options="pickerOptionsStart"
            type="date"
            placeholder="选择日期"
            @change="datePickerChange($event,'startDate')"
          >
          </el-date-picker>
          <div style="margin:0 10px;cursor: default">至</div>
          <el-date-picker
            :clearable="false"
            v-model:value="endDate"
            :picker-options="pickerOptionsEnd"
            type="date"
            placeholder="选择日期"
            @change="datePickerChange($event,'endDate')"
          >
          </el-date-picker>
        </div>
        <!--排行榜-->
        <div class="contentBox" v-loading="loading">
          <img src="@/assets/images/datanone.png" style="width:300px;height: 300px;margin-left: 400px;margin-top: 100px"
               v-if="datanone"
          >
          <div v-if="!datanone">
            <el-card class="box-card" v-for="(item,index) in list" :key="index">
              <div>
                <!--标题和活跃度-->
                <div class="item_title">
                  <div class="branch_name">
                    <span>{{ item.branchName }}</span>
                  </div>
                  <div class="activeText">课程平均活跃度：<span class="activeNum">{{ item.avgStudentActive }}</span></div>
                </div>
                <!--内容-->
                <div class="item_content">
                  <!-- 图表-->
                  <div class="item_l">
                    <div class="pieChart" :ref="`active_${index}`"></div>
                    <div class="chartsTip">
                      <div>分院课程数：{{ item.totalCourseCount }}</div>
                      <div>活跃课程数量：{{ item.activeCourseCount }}</div>
                      <!--                    <div>活跃课程数量：730</div>-->
                    </div>
                  </div>
                  <!--表格-->
                  <div class="item_r">
                    <div class="tit_top">
                      <div>活跃课程排行榜</div>
                      <div class="lookmore" @click="lookDetail(item.branchId)">查看详情 ></div>
                    </div>
                    <div>
                      <el-table
                        :data="item.activeCourseList"
                        style="width: 100%"
                        :row-style="{height: '0'}"
                        :cell-style="{padding: '3px'}"
                        :header-row-style="{height: '0'}"
                        :header-cell-style="{height: '0'}"
                        size="mini"
                      >
                        <el-table-column
                          prop="sort"
                          label="排名"
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="courseName"
                          label="课程名称"
                          align="center"
                          show-overflow-tooltip
                        >
                        </el-table-column>
                        <el-table-column
                          prop="principalName"
                          label="主讲教师"
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="teacherNames"
                          label="辅助教师"
                          align="center"
                          show-overflow-tooltip
                        >
                        </el-table-column>
                        <el-table-column
                          prop="active"
                          label="活跃度"
                          align="center"
                        >
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">

        <el-button type="primary" @click="close">关闭</el-button>
      </span>
    </el-dialog>
    <Lookdetail ref="lookmore"></Lookdetail>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import Lookdetail from '@/views/activeDetail/courseDetail.vue'
import { getHomePageCourseDetail } from '@/api/homePage'
import { formatDate } from '@/utils'

export default {
  components: { Lookdetail },
  name: 'activeCourse',
  data() {
    return {
      loading: true,
      open: false,
      userType: '',
      endDate: '',
      startDate: '',
      date: '',
      list: [],
      datanone: false
    }
  },
  computed: {
    pickerOptionsStart() {
      const that = this
      return {
        disabledDate(time) {
          if (that.endDate) {
            const endDate = new Date(that.endDate)
            endDate.setDate(endDate.getDate())
            return time.getTime() > endDate.getTime()
          } else {
            return time.getTime() > Date.now()
          }
        }
      }
    },
    pickerOptionsEnd() {
      const that = this
      return {
        disabledDate(time) {
          if (!that.startDate) {
            return
          }
          const startDate = new Date(that.startDate)
          startDate.setDate(startDate.getDate() - 1)
          return time.getTime() < startDate.getTime() || time.getTime() > Date.now()
        }
      }
    }
  },
  created() {
    const time = formatDate(new Date())
    this.startDate = time.split(' ')[0]
    this.endDate = time.split(' ')[0]
  },
  mounted() {

  },
  methods: {
    show() {
      this.open = true
      this.sendRequest()
    },
    datePickerChange(e, type) {
      this[type] = formatDate(e).split(' ')[0]
      this.sendRequest()
    },
    sendRequest() {
      this.loading = true
      this.startDate = this.startDate ? this.startDate : this.endDate
      this.endDate = this.endDate ? this.endDate : this.startDate
      const params = {
        startDate: this.startDate,
        endDate: this.endDate
      }

      getHomePageCourseDetail(params).then(res => {

        let { code, rows } = res
        if (code == 200) {
          if (rows.length == 0) {
            this.datanone = true
            return
          }
          this.datanone = false
          console.log(rows, 'sdfjfdjfbj')
          this.list = rows
          this.list.forEach((e, i) => {
            e.activeCourseList = e.activeCourseList.slice(0, 5)
            this.$nextTick(() => {
              this.setActiveUserOption(this.$refs[`active_${i}`][0], e.activeCoursePercent)
            })
          })
        }
      }).finally(() => {
        this.loading = false
      })
    },
    // 活跃学生环形图
    setActiveUserOption(key, activeCoursePercent) {
      let myCharts = echarts.init(key)
      const colorList = ['rgba(37, 111, 254, 1)', 'rgba(4, 211, 180, 1)'] //上层环背景
      const bgList = ['rgba(37, 111, 254, 0.2)', 'rgba(4, 211, 180, 0.2)']
      let option = {
        backgroundColor: 'rgba(0,0,0,.0)',
        title: {
          show: true,
          text: `${activeCoursePercent}%`,
          left: '24.5%',
          top: '49.5%',
          textAlign: 'center',
          textStyle: {
            color: 'rgba(37, 111, 254, 1)',
            fontSize: 14
          },
          subtextStyle: {
            color: 'rgba(37, 111, 254, 1)',
            fontSize: 14
          }
        },
        angleAxis: {
          show: false, //隐藏角度轴（圆心角）
          max: 100,
          startAngle: 90, //极坐标从第一象限开始，即平面直角坐标系,用时钟理解，0就是三点钟方向，这里我们从12点钟方向开始，也就是3点钟方向加90度
          splitLine: {
            show: false //隐藏分隔线
          }
        },
        // barMaxWidth: 10, //设置圆环最大宽度
        radiusAxis: {
          show: false, //隐藏径向轴（半径）
          type: 'category',
          data: ['活跃课程数量'] //传入每条圆环的径向值
        },
        polar: {
          radius: [40, 60],
          center: ['25%', '56.5%'] //总体的最小半径，最大半径
        },
        series: [{ //上层的圆环
          type: 'bar',
          data: [activeCoursePercent],
          coordinateSystem: 'polar', //设置类型为极坐标
          roundCap: true, //柱状图末端呈现圆角
          itemStyle: { //设置每一个圆环的颜色
            color: (params) => {
              return colorList[params.dataIndex]
            }
          },
          animationEasing: 'quadraticIn', //初始动画
          barGap: '-100%', //柱间距离,用来将上下两种圆环重合
          z: 200 //圆环层级，和zindex相似
        },
          { //下层的圆环
            type: 'bar',
            data: [100],
            coordinateSystem: 'polar',
            roundCap: true,
            itemStyle: { //设置每一个圆环的颜色
              color: (params) => {
                return bgList[params.dataIndex]
              }
            },
            z: 100,
            barGap: '-100%' //柱间距离,用来将上下两种圆环重合
          }]
      }

      option && myCharts.setOption(option)
    },
    lookDetail(branchId) {
      this.$refs.lookmore.show(this.startDate, this.endDate, branchId)
    },
    close() {
      this.list = []
      const time = formatDate(new Date())
      this.startDate = time.split(' ')[0]
      this.endDate = time.split(' ')[0]
      this.open = false
    }

  }

}
</script>
<style scoped lang="scss">

::v-deep .el-main {
  background-color: #e9eef3;
  color: #333;
  /* text-align: center; */
  line-height: 10px !important;
}

.datePicker {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
}

.title {
  /** 文本1 */
  font-size: 14px;
  font-weight: 500;
  line-height: 22.4px;
  color: rgba(51, 51, 51, 1);
}

.box-card {
  width: 100%;
  height: 300px;
  padding-bottom: 10px !important;
  box-sizing: border-box;
  border-radius: 16px;
  margin-bottom: 20px;

  .item_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    //margin-bottom: 3px;

    .branch_name {
      font-size: 14px;
      font-weight: 500;
      line-height: 22.4px;
      color: rgba(51, 51, 51, 1);
      display: flex;
      align-items: center;

      span {
        margin-left: 4px;
        margin-top: 4px;
        cursor: default;
      }
    }

    .active_icon {
      width: 30px;
      height: 30px;
      vertical-align: middle;
    }

    .activeText {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 500;
      //line-height: 36px;
      color: rgba(0, 0, 0, 1);
      cursor: default;

      .activeNum {
        font-size: 20px;
        font-weight: 700;
        color: rgba(4, 211, 180, 1);
        //vertical-align: top;
      }
    }
  }

  .item_content {
    display: flex;
    //align-items: center;

    .item_l {
      width: 332px;
      height: 190px;
      position: relative;

      //background: red;
    }

    .item_r {
      flex: 1;

      .tit_top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        font-weight: 400;
        margin-bottom: 5px;
        cursor: default;

        .lookmore {
          cursor: pointer;
          font-size: 12px;
          font-weight: 400;
          line-height: 19.6px;
          color: rgba(74, 144, 226, 1);
        }
      }
    }

  }

}

.pieChart {
  width: 100%;
  height: 100%;

}

.chartsTip {
  font-size: 12px;
  position: absolute;
  top: 45%;
  left: 52%;
  cursor: default;

  div {
    margin-top: 5px;
  }
}

.contentBox {
  width: 100%;
  height: 500px;
  overflow: scroll;
}

.branch_Sort {
  font-size: 20px;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
  cursor: default;
}
</style>
